<template>
  <div class="equipmentEcharts zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
<!--        <Col span="4">-->
<!--          <div>-->
<!--            <p class="label">{{$t('common.company')}}</p>-->
<!--            <div class="ipt">-->
<!--              <Select v-model="company" filterable clearable label-in-value :placeholder="$t('common.PleaseSelect')"-->
<!--                      @on-change="handleChange($event, 'company')">-->
<!--                <Option v-for="(item, index) of companyList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--          </div>-->
<!--        </Col>-->
<!--        <Col span="4">-->
<!--          <div>-->
<!--            <p class="label">{{$t('厂区')}}</p>-->
<!--            <div class="ipt">-->
<!--              <Select v-model="factory" filterable label-in-value clearable :placeholder="$t('common.PleaseSelect')"-->
<!--                      @on-change="handleChange($event, 'factory')" @on-open-change="handleOpenChange($event, 'factory')">-->
<!--                <Option v-for="(item, index) of factoryList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--          </div>-->
<!--        </Col>-->
<!--        <Col span="4">-->
<!--          <div>-->
<!--            <p class="label">{{$t('bigScreen.Line')}}</p>-->
<!--            <div class="ipt">-->
<!--              <Select v-model="line" filterable clearable label-in-value @on-change="handleChange($event, 'line')"-->
<!--                      @on-open-change="handleOpenChange($event, 'line')" :placeholder="$t('common.PleaseSelect')" >-->
<!--                <Option v-for="(item, index) of lineList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--          </div>-->
<!--        </Col>-->
<!--        <Col span="4">-->
<!--          <div>-->
<!--            <p class="label">{{$t('工站')}}</p>-->
<!--            <div class="ipt">-->
<!--              <Select v-model="workstation" filterable label-in-value clearable-->
<!--                      @on-change="handleChange($event, 'workstation')" @on-open-change="handleOpenChange($event, 'workstation')"-->
<!--                      :placeholder="$t('common.PleaseSelect')" >-->
<!--                <Option v-for="(item, index) of workstationList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--          </div>-->
<!--        </Col>-->
        <Col span="6">
          <div>
            <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
            <div class="ipt">
              <Cascader :value.sync="params.orgCodes"/>
<!--              <Cascader clearable :data="orgList" v-model="params.orgCode"-->
<!--                        :placeholder="$t('common.PleaseSelect')"-->
<!--                        change-on-select></Cascader>-->
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('设备编号')}}</p>
            <div class="ipt">
              <Select v-model="params.deviceNo"
                      filterable
                      label-in-value
                      clearable
                      :remote-method="searchDevice"
                      :placeholder="$t('maintenance.EquipmentNo')">
                <Option v-for="(item, index) of deviceList"
                        :value="item.deviceNo"
                        :key="index"
                        :label="item.deviceNo + '-' + item.deviceName">
                </Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('展示时间类型')}}</p>
            <div class="ipt">
              <Select v-model="params.type" filterable clearable @on-change="handleType" :placeholder="$t('fault.DisplayByDay')">
                <Option v-for="(item, index) of typeList" :value="item.id" :key="index">{{ item.name }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('日期')}}</p>
            <div class="ipt">
              <DatePicker v-if="params.type!=2" type="daterange" :clearable="false"   :placeholder="$t('fault.failure')" :value="dateTimeRange"
                          :format="params.type === 1 ? 'yyyy-MM-dd' : 'yyyy-MM-dd'" @on-change="handleChangeDate"></DatePicker>
           <div v-else>
             <a-week-picker :allowClear="true" :disabledDate="startDisabledDate" style="display: inline-block;width: 100px;" v-model="startWeek" :placeholder="$t('选择开始周')" />
             ~
             <a-week-picker :allowClear="true" :disabledDate="endDisabledDate" style="display: inline-block;width: 100px;" v-model="endWeek" :placeholder="$t('选择结束周')" />
           </div>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" @click="getData">{{ $t('common.Query') }}</Button>
              <Button
                  class="reset-btn"
                  @click="reset()"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="wrap">
      <div class="echartsWrap">
        <div class="title">
           <!-- MTBF汇总分析 -->
          <div><span class="text">MTBF {{ $t('fault.SummaryAnalysis') }}</span>{{ address ? `（${address}）` : '' }}</div>
          <div><span class="circle"></span><span>MTBF</span></div>
        </div>
        <div id="equechartOne"></div>
      </div>

      <div class="echartsWrap">
        <div class="title">
           <!-- MTTR汇总分析 -->
          <div><span class="text">MTTR {{ $t('fault.SummaryAnalysis') }}</span>{{ address ? `（${address}）` : '' }}</div>
          <div><span class="circle"></span><span>MTTR</span></div>
        </div>
        <div id="equechartTwo"></div>
      </div>
    </div>
    <div class="wrap">
      <div class="echartsWrap">
        <div class="title">
            <!-- 故障次数 -->
          <div><span class="text">{{ $t('fault.FailureTimes') }}</span>{{ address ? `（${address}）` : '' }}</div>
            <!-- 维修次数 -->   <!-- 维修时长 -->
          <div><span class="circle"></span><span>{{ $t('fault.MaintenanceTimes') }}</span><span class="circle circle2"></span><span>{{ $t('fault.serviceDuration') }}</span></div>
        </div>
        <div id="equechartThree"></div>
      </div>
      <div class="echartsWrap">
        <div class="title">
           <!-- 故障分类 -->
          <div><span class="text">{{ $t('fault.FaultClassification') }}</span>{{ address ? `（${address}）` : '' }}</div>
        </div>
        <div id="equechartFour"></div>
      </div>
    </div>

  </div>
</template>

<script>
import Cascader from '@/components/Cascader'
import G2 from "@antv/g2";
import moment from "moment";
import recursion from "@/util/recursion";
import {DatePicker} from 'ant-design-vue'
const {WeekPicker} = DatePicker
// import Vue from 'vue'

// moment.locale('zh-cn');
// Vue.use(DatePicker)
export default {
  name: "equipmentEcharts",
  components:{'a-week-picker':WeekPicker,Cascader},
  data() {
    return {
      startWeek:"",
      endWeek:"",
      statusList: [{ id: 1, name: '我是' }],
      typeList: [
        { id: 0, name: this.$t('按天展示') },
        { id: 2, name: this.$t('按周展示') },
        { id: 1, name: this.$t('按月展示') }
      ],
      company: '', // 公司
      companyName: '', // 公司
      factory: '', // 厂区
      factoryName: '', // 厂区
      line: '', // 产线
      lineName: '', // 产线
      workstation: '', // 工站
      workstationName: '', // 工站
      params: {
      },
      companyList: [],
      factoryList: [],
      lineList: [],
      workstationList: [],
      deviceList: [],
      dateTimeRange: [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')],
      equechartOne: null,
      equechartTwo: null,
      equechartThree: null,
      equechartFour: null,
      orgList:[]
    };
  },
  computed: {
    address() {
      let str = ''
      if (this.company) {
        str += `-${this.companyName}`
      }
      if (this.factory) {
        str += `-${this.factoryName}`
      }
      if (this.line) {
        str += `-${this.lineName}`
      }
      if (this.workstation) {
        str += `-${this.workstationName}`
      }
      if (this.params.deviceNo) {
        str += `-${this.params.deviceNo}`
      }
      return str.substring(1);
    }
  },
  mounted() {
    this.getData()
    this.getList()
    this.getOrgList()
  },
  methods: {
    startDisabledDate(currentDate){

      if (!this.endWeek) return false
      else{
        const endYear = moment(this.endWeek).format('YYYY')
        const endWeek = moment(this.endWeek).week()
        const currentYear = moment(currentDate).format('YYYY')
        const currentWeek = moment(currentDate).week()
        if (currentYear > endYear || (endYear == currentYear && currentWeek > endWeek)){
          return  true
        }
      }
    },
    endDisabledDate(currentDate){
      if (!this.startWeek) return false
      else{
        const startYear = moment(this.startWeek).format('YYYY')
        const startWeek = moment(this.startWeek).week()
        const currentYear = moment(currentDate).format('YYYY')
        const currentWeek = moment(currentDate).week()
        if (currentYear < startYear || (startYear == currentYear && currentWeek < startWeek)){
          return  true
        }
      }
    },
    // 获取使用位置
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {level:3}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    handleChange(val, prop) {
      this[`${prop}Name`] = val ? val.label : ''
      let newProp = ''
      if (prop === 'company') {
        newProp = 'factory'
        this.factory = ''
        this.line = ''
        this.workstation = ''
        this.getList(val.value, newProp, 3)
      } else if (prop === 'factory') {
        newProp = 'line'
        this.line = ''
        this.workstation = ''
        this.getList(val.value, newProp, 4)
      } else if (prop === 'line') {
        newProp = 'workstation'
        this.workstation = ''
        this.getList(val.value, newProp, 5)
      }
      // this.getDeviceList()
    },
    searchDevice(query){
      this.axios({
        method: "get",
        url: "/dms/dmsDevice/deviceListByParams",
        params: {
          param: query
        },
      }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data;
        }
      });
    },
    handleOpenChange(val, prop) {
      if (val) {
        if (prop === 'factory' && this.factoryList.length === 0) {
          this.$Message.warning({ content: `${this.$t('common.PleaseSelect')} ${this.$t('common.company')}`, duration: 2, closable: true, });
        }
        if (prop === 'line' && this.lineList.length === 0) {
          this.$Message.warning({ content: `${this.$t('common.PleaseSelect')} ${this.$t('厂区')}`, duration: 2, closable: true, });
        }
        if (prop === 'workstation' && this.workstationList.length === 0) {
          this.$Message.warning({ content: `${this.$t('common.PleaseSelect')} ${this.$t('bigScreen.Line')}`, duration: 2, closable: true, });
        }
      }
    },
    handleType(val) {
      if (val === 1) {
        this.dateTimeRange = [this.$moment(new Date()).subtract(1, 'year').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')]
      } else if(val === 2){
        this.startWeek = this.$moment(new Date()).format('YYYY-MM-DD')
        this.endWeek = this.$moment(new Date()).format('YYYY-MM-DD')
      }
      else{
        this.dateTimeRange = [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')]
      }
    },
    getList(id = undefined, type = 'company', level = 2) {
      this.axios({
        method: "get",
        url: "/dms/statistical/findByParentId",
        params: { id, level },
      }).then((res) => {
        if (res.code === 200) {
          this[`${type}List`] = res.data
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getDeviceList() {
      this.axios({
        method: "get",
        url: "/dms/dmsDevice/deviceList",
        params: {
          assetsNo: '',
          deviceMId: '',
          deviceNo: '',
          orgCode: (Array.isArray(this.params.orgCode) && this.params.orgCode.length > 0) ? this.params.orgCode.at(-1) :"",
        },
      }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data.filter(v => v.deviceNo)
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //日期
    handleChangeDate(val) {
      this.dateTimeRange = val
    },
    reset (){
      this.params = {};
      this.dateTimeRange = [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')]
      this.getData();
    },
    getData() {
      const params = {
        type: this.params.type || 0,
        orgCodes:'',
        startDate: moment(this.dateTimeRange[0]).format('YYYY-MM-DD'),
        endDate:  moment(this.dateTimeRange[1]).format('YYYY-MM-DD'),
        deviceNo: this.params.deviceNo || ''
      }
      if (this.params.orgCodes && this.params.orgCodes.length){
         params.orgCodes = this.params.orgCodes.join(',')
      }

      if (params.type==2){
        if (!this.startWeek || !this.endWeek){
          this.$Message.warning({
            content: this.$t("请选择开始时间和结束时间"),
            duration: 6,
            closable: true,
          });
          return;
        }
        params.startDate = moment(this.startWeek).subtract(moment(this.startWeek).format('E')-1, 'days').format('YYYY-MM-DD');
        params.endDate = moment(this.endWeek).add(7-moment(this.endWeek).format('E'), 'days').format('YYYY-MM-DD');
      }

      this.getMTBFData(params)
      this.getMTTRData(params)
      this.getFaultCount(params)
      this.getFaultType(params)
    },
    setOrgCode() {
      // let code = ''
      // if (this.company) {
      //   code = this.companyList.filter(v => v.id === this.company)[0].code
      // }
      // if (this.factory) {
      //   code = this.factoryList.filter(v => v.id === this.factory)[0].code
      // }
      // if (this.line) {
      //   code = this.lineList.filter(v => v.id === this.line)[0].code
      // }
      // if (this.workstation) {
      //   code = this.workstationList.filter(v => v.id === this.workstation)[0].code
      // }
      // return code
    },
    getMTBFData(params) {
      let _params = JSON.parse(JSON.stringify(params))
      _params.startDate = moment(_params.startDate).format('YYYY-MM-DD 00:00:00')
      _params.endDate = moment(_params.endDate).format('YYYY-MM-DD 23:59:59')

      this.axios({
        method: "get",
        url: "/dms/statistical/mtbfInfo",
        params: _params,
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.mtbfVoList.map(v => ({ value: v.mtbf || 0, date: (this.params.type === 2 ? v.yearWeek : this.params.type === 1 ? v.yearMonth:v.applyDate) + ' ' }))
          if (this.equechartOne) {
            this.equechartOne.changeData(list)
          } else {
            this.initChart1(list)
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getMTTRData(params) {
      let _params = JSON.parse(JSON.stringify(params))
      _params.startDate = moment(_params.startDate).format('YYYY-MM-DD 00:00:00')
      _params.endDate = moment(_params.endDate).format('YYYY-MM-DD 23:59:59')
      this.axios({
        method: "get",
        url: "/dms/statistical/mttrInfo",
        params:_params,
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.mttrVoList.map(v => ({ value: v.mttr || 0, date: (this.params.type === 2 ? v.yearWeek : this.params.type === 1 ? v.yearMonth:v.applyDate) + ' ' }))
          if (this.equechartTwo) {
            this.equechartTwo.changeData(list)
          } else {
            this.initChart2(list)
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getFaultCount(params) {
      let _params = JSON.parse(JSON.stringify(params))
      _params.startDate = moment(_params.startDate).format('YYYY-MM-DD 00:00:00')
      _params.endDate = moment(_params.endDate).format('YYYY-MM-DD 23:59:59')

      this.axios({
        method: "get",
        url: "/dms/statistical/fixCount",
        params: _params,
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.map(v => ({ value: v.fixCount, date: (this.params.type === 1 ? v.applyMonth : v.applyDate) + ' ', time: v.fixTime }))
          if (this.equechartThree) {
            this.equechartThree.changeData(list)
          } else {
            this.initChart3(list)
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getFaultType(params) {
      let _params = JSON.parse(JSON.stringify(params))
      _params.startDate = moment(_params.startDate).format('YYYY-MM-DD 00:00:00')
      _params.endDate = moment(_params.endDate).format('YYYY-MM-DD 23:59:59')

      this.axios({
        method: "get",
        url: "/dms/statistical/faultTypeStatistics",
        params: _params,
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.map(v => ({ percent: v.per, count: v.faultTypeCount, item: v.faultTypeName }))
          if (this.equechartFour) {
            this.equechartFour.changeData(list)
          } else {
            this.initChart4(list)
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    initChart1(arr) {
      this.equechartOne = new G2.Chart({
        container: "equechartOne",
        forceFit: true,
        height: 350,
        padding: [60, 40, 40, 60],
      });
      // const margin = 1 / arr.length
      this.equechartOne.source(arr);
      this.equechartOne.scale({
        value: {
          alias: `MTBF(H)`,
          min: 0,
          type: 'linear',
          // count: 1
        },
        // date: {
        // range: [margin / 2, 1 - margin / 2],
        // },
      });

      this.equechartOne.axis('date', {
        label: {
          autoHide: true,
          autoRotate: false
        }
      });

      this.equechartOne.guide().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: `MTBF(H)`, // 显示的文本内容
        style: {
          // 文本的图形样式属性
          fill: '#000', // 文本颜色
          fontSize: '14', // 文本大小
        }, // 文本的图形样式属性
        offsetX: -40, // x 方向的偏移量
        offsetY: -30, // y 方向偏移量
      })
      this.equechartOne.tooltip({
        inPlot: false,
        crosshairs: {
          type: "line",
        },
        itemTpl:
          `<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>MTBF: {value}</li>`,
      });
      this.equechartOne.area().position("date*value").color('l(90) 0:#aec7fd 1:#f8faff').tooltip(false);
      this.equechartOne.line().position("date*value").size(2);
      this.equechartOne.point().position('date*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      });
      this.equechartOne.render();
    },
    initChart2(arr) {
      let maxValue = 5;
      arr.forEach(item => {
        if (item.value > maxValue)
          maxValue = item.value
      })
      this.equechartTwo = new G2.Chart({
        container: "equechartTwo",
        forceFit: true,
        height: 350,
        padding: [60, 40, 40, 60],
      });
      // const margin = 1 / arr.length
      this.equechartTwo.source(arr);

      const sourceOption = {
        value: {
          alias: 'MTTR',
          min: 0,
          type: 'linear',
        },
        date: {
          // range: [margin / 2, 1 - margin / 2],
        },
      }
      //tickInterval
      if (maxValue <= 5) {
        sourceOption.value.minTickInterval = 1
      }
      this.equechartTwo.source(arr, sourceOption);


      this.equechartTwo.axis('date', {
        label: {
          autoHide: true,
          autoRotate: false
        }
      });

      // this.equechartTwo.scale({
      //   value: {
      //     alias: 'MTTR',
      //     min: 0,
      //     type: 'linear',
      //   },
      //   date: {
      //     // range: [margin / 2, 1 - margin / 2],
      //   },
      // });
      this.equechartTwo.guide().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: `MTTR（H）`, // 显示的文本内容
        style: {
          // 文本的图形样式属性
          fill: '#000', // 文本颜色
          fontSize: '14', // 文本大小
        }, // 文本的图形样式属性
        offsetX: -40, // x 方向的偏移量
        offsetY: -30, // y 方向偏移量
      })
      this.equechartTwo.tooltip({
        inPlot: false,
        crosshairs: {
          type: "line",
        }
      });
      this.equechartTwo.area().position("date*value").color('l(90) 0:#aec7fd 1:#f8faff').tooltip(false);
      this.equechartTwo.line().position("date*value").size(2);
      this.equechartTwo.point().position('date*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      });
      this.equechartTwo.render();
    },
    initChart3(arr) {

      let maxValue = 5;
      arr.forEach(item => {
        if (item.value > maxValue)
          maxValue = item.value
      })
      this.equechartThree = new G2.Chart({
        container: "equechartThree",
        forceFit: true,
        height: 350,
        padding: [60, 50, 40, 60],
      });



      const sourceOption = {
        value: {
          tickCount: 5,
          min: 0,
          alias: `${this.$t('fault.MaintenanceTimes')}`,
          type: 'linear',
            // minTickInterval:1,
            minLimit:0
        },
        time: {
          min: 0,
          //alias: '维修时长',
          alias: `${this.$t('fault.serviceDuration')}`,
          type: 'linear',
        }
      }
      //tickInterval
      if (maxValue <= 5) {
        sourceOption.value.minTickInterval = 1
      }
      this.equechartThree.source(arr, sourceOption);


      this.equechartThree.axis('date', {
        label: {
          autoHide: true,
          autoRotate: false
        }
      });


      // this.equechartThree.source(arr, {
      //   value: {
      //     tickCount: 5,
      //     min: 0,
      //     alias: '维修次数',
      //     type: 'linear',
      //   },
      //   time: {
      //     min: 0,
      //     alias: '维修时长'
      //   }
      // });
      this.equechartThree.axis('time', {
        grid: null
      });
      this.equechartThree.guide().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: this.$t('次数'), // 显示的文本内容
        style: {
          // 文本的图形样式属性
          fill: '#000', // 文本颜色
          fontSize: '14', // 文本大小
        }, // 文本的图形样式属性
        offsetX: -30, // x 方向的偏移量
        offsetY: -30, // y 方向偏移量
      })
      this.equechartThree.guide().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['end', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: 'H', // 显示的文本内容
        style: {
          // 文本的图形样式属性
          fill: '#000', // 文本颜色
          fontSize: '14', // 文本大小
        }, // 文本的图形样式属性
        offsetX: -20, // x 方向的偏移量
        offsetY: -30, // y 方向偏移量
      })
      this.equechartThree.tooltip({
        inPlot: false,
        crosshairs: {
          type: "rect",
        },
      });
      this.equechartThree.interval().position("date*value").color('#6b9cfb')
      this.equechartThree.line().position("date*time").size(2).color('#5ac9f6');
      this.equechartThree.point().position('date*time').size(4).color('#5ac9f6').shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      });
      this.equechartThree.render();
    },
    initChart4(arr) {
      this.equechartFour = new G2.Chart({
        container: "equechartFour",
        forceFit: true,
        height: 350,
        padding: [30, 100, 30, 0],
      });
      this.equechartFour.source(arr);
      this.equechartFour.coord("theta", {
        radius: 0.75,
        innerRadius: 0.6,
      });
      this.equechartFour.legend({
        position: 'right-center',
        offsetX: -60
      })
      this.equechartFour.tooltip({
        showTitle: false,
        itemTpl:
          '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {count}（{value}）</li>',
      });
      var interval = this.equechartFour
        .intervalStack()
        .position("count")
        .color("item")
        .label("percent", {
          formatter: function formatter(val, item) {
            return item.point.item + ": " + item.point.count + "    " + val;
          },
        })
        .tooltip("item*percent*count", function (item, percent, count) {
          return {
            name: item,
            value: percent,
            count
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });
      this.equechartFour.render();
      interval.setSelected(arr[0]);
    },
  },
};
</script>

<style scoped lang="scss">
.equipmentEcharts {
  .wrap {
    display: flex;
    margin-top: 10px;

    .echartsWrap {
      width: 50%;
      height: 400px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;

      .title {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        background: #f8f8f8;

        div {
          font-size: 14px;
        }

        .text {
          font-weight: bold;
          font-size: 16px;

          &:before {
            display: inline-block;
            vertical-align: middle;
            content: "";
            width: 10px;
            height: 20px;
            border-left: 1px dashed #187bdb;
            border-right: 1px dashed #187bdb;
            margin-right: 10px;
            margin-top: -2px;
          }
        }

        span {
          vertical-align: middle;
        }
      }

      &:first-child {
        margin-right: 10px;
      }

      .circle {
        width: 12px;
        height: 12px;
        background: #6b9cfb;
        border-radius: 50%;
        display: inline-block;
        margin: 0 5px;
      }

      .circle2 {
        background: #5ac9f6;
        margin: 0 15px;

        &:before {
          display: inline-block;
          content: "";
          width: 8px;
          height: 4px;
          background: #5ac9f6;
          vertical-align: top;
          margin-left: 15px;
          margin-top: 4px;
        }

        &:after {
          display: inline-block;
          content: "";
          width: 8px;
          height: 4px;
          background: #5ac9f6;
          vertical-align: top;
          margin-left: -11px;
          margin-top: -17px;
        }
      }
    }
  }
}
</style>


